<template>
  <div>
    父组件: 
    <MyTable :list="list">
      <!-- 作用域插槽 -->
      <!-- 属性都自动收集到一个对象里了 对象名字可以随意起 -->
      <template #default="obj">
        <button @click='del(obj.row)'>删除</button>
      </template>
    </MyTable>

    <MyTable :list="list2">
      <!-- 作用域插槽 -->
      <!-- 属性都自动收集到一个对象里了 对象名字可以随意起 -->
      <!-- 对象可以解构 -->
      <template #default="{row}">
        <button @click='look(row)'>查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable'
export default {
  name: "App",
  components: {
    MyTable
  },
  data() {
    return {
      list: [
        {id: 1, name: '老韩', age: 19},
        {id: 2, name: '老王', age: 30},
        {id: 3, name: '老李', age: 49},
      ],
      list2: [
        {id: 1, name: '老韩', age: 19},
        {id: 2, name: '老王', age: 30},
        {id: 3, name: '老李', age: 49},
      ]
    }
  },
  methods: {
    del(row) {
      console.log(row);
      this.list = this.list.filter(item => item.id !== row.id)
    },
    look(row) {
      console.log(row);
    }
  }
}
</script>

<style>

</style>